<template>
  <div id="videoConfig">
    <h1 class="con-right-title">官网-关于我们</h1>
    <span class="videoTitle">品牌简介_视频配置</span>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button id="upload" type="warning">上传视频</el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updatedByName"
        label="更新人员"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="videoSize"
        label="视频大小"
        min-width="100"
        align="center"
        :formatter="formatterSize"
      >
      </el-table-column>
      <el-table-column label="发布状态" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.status === 'OPEN'" class="tag-span primary"
            >已发布</span
          >
          <span v-else class="tag-span">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.status === 'OPEN'"
            type="text"
            @click="handleStatus(row.id)"
          >
            下架
          </el-button>
          <el-button v-else type="text" @click="handleStatus(row.id)">
            发布
          </el-button>
          <el-button type="text" @click="toPreview(row.id)">
            查看预览
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 视频预览 -->
    <showVideo v-if="videoData.isShow" :video-data="videoData"></showVideo>
  </div>
</template>
<script>
import showVideo from '@common/showVideo'
import {
  getVideoList,
  videoPreview,
  editStatus,
  addVideo
} from '@/api/brandManage/aboutUs'
import { getVideoPara } from '@utils/pubFunction'
import { uploadVideo } from '@utils/uploadVideo'
export default {
  components: { showVideo },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      videoData: {
        isShow: false,
        vid: ''
      },
      polivNum: {
        polyvUserId: '',
        polyvSecretKey: '',
        polyvWriteToken: '',
        polyvReadToken: ''
      },
      upVideo: null,
      uploadVideoData: {
        vid: '',
        videoSize: 0
      }
    }
  },
  mounted() {
    this.searchList()
    this.getPolivNum()
  },
  methods: {
    /* 获取系统配置-保利威视 */
    getPolivNum() {
      let _this = this
      getVideoPara().then((data) => {
        this.polivNum = { ...data }
        uploadVideo(_this.polivNum, _this.saveVideo).then((resObj) => {
          _this.upVideo = resObj
        })
      })
    },
    /* 保存上传视频 */
    saveVideo(fileData) {
      this.uploadVideoData.vid = fileData.vid
      this.uploadVideoData.videoSize = fileData.filesize
      const isUpload = this.uploadVideoData.videoSize / 1024 / 1024 > 201
      if (isUpload) {
        this.$message.warning('上传失败, 视频最大不超过200M')
        return
      }
      addVideo(this.uploadVideoData, () => {
        this.searchList()
      })
    },
    /* 获取视频列表 */
    searchList() {
      getVideoList(this.searchParams, (res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    },
    /* 视频预览 */
    toPreview(id) {
      videoPreview({ id }, (res) => {
        this.videoData = { isShow: true, vid: res.vid }
      })
    },
    /* 修改状态 */
    handleStatus(id) {
      editStatus({ id }, () => {
        this.searchList()
        this.$message.success('状态修改成功')
      })
    },
    /* 格式化 */
    formatterSize(row) {
      const videoSize = row.videoSize / 1024 / 1024
      return videoSize.toFixed(2) + 'M'
    }
  }
}
</script>
<style lang="less" scoped>
.videoTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin-left: 30px;
}
</style>
